import React, { useState } from "react";
import { Dialog, NavBar, NoticeBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.css";
import { Button, Space, Form, Input, Modal } from "antd-mobile";
import { useSelector, useDispatch } from "react-redux";
import { Card, List, Checkbox, Popup } from "antd-mobile";
import { DeleteOutline, FillinOutline } from "antd-mobile-icons";
import { TickStatus, TickAdd, TickEdit, Tickdel } from "../../store/TickSlice";
function Index() {
  const navigate = useNavigate();
  const { TickListDatas } = useSelector((state) => state.TickSlice);
  console.log(TickListDatas);
  const [visible, setVisible] = useState(false);
  const dispatch = useDispatch();
  const [form] = Form.useForm();
  const [isAdddEdit, setIsAddEdit] = useState(true);

  //删除
  const handleDel = async (item) => {
    const delObj = await Dialog.confirm({
      content: "你确定要删除当前乘车人吗？",
    });
    if (delObj) {
      dispatch(Tickdel(item));
    } else {
      console.log("取消删除");
    }
  };
  //新增按钮
  const handleAddTick = () => {
    setVisible(true);
    form.resetFields();
    setIsAddEdit(true);
  };

  //编辑按钮
  const handleEditTick = (item) => {
    setVisible(true);
    form.setFieldsValue(item);
    setIsAddEdit(false);
  };
  const onFinish=()=>{
    if(isAdddEdit){
      //新增
      const addobj={...form.getFieldsValue(),id:Date.now(),status:false}
      dispatch(TickAdd(addobj))
      setVisible(false)
    }else{
      //编辑
      const eidtobj=form.getFieldsValue(true)
      dispatch(TickEdit(eidtobj))
      setVisible(false)
    }
    form.resetFields();
  }

  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>选择乘车人</NavBar>
      <NoticeBar
        content="我自长生问天下，极道万载千重来，九州完事千重意，白发琳琳问道天"
        color="alert"
      />

      <div className={styles.ticklist}>
        <Button size="small" color="primary" onClick={() => handleAddTick()}>
          添加乘车人
        </Button>

        <Card title="乘车人数据">
          <List>
            {TickListDatas.map((item, ind) => (
              <List.Item
                key={ind}
                description={item.code}
                prefix={<FillinOutline onClick={() => handleEditTick(item)} />}
                extra={
                  <div>
                    <DeleteOutline
                      style={{ marginRight: 30, fontSize: 20 }}
                      onClick={() => handleDel(item)}
                    />
                    <Checkbox checked={item.status} onChange={()=>{
                      dispatch(TickStatus(item))
                      navigate(-1)
                    }} />
                  </div>
                }
              >
                {item.name}
              </List.Item>
            ))}
          </List>
        </Card>
      </div>

      <Modal
        visible={visible}
        content={
          <Form
            layout="horizontal"
            onFinish={onFinish}
            form={form}
            footer={
              <Button block type="submit" color="primary" size="large">
                提交
              </Button>
            }
          >
            <Form.Header>水平布局表单</Form.Header>
            <Form.Item
              name="name"
              label="姓名"
              rules={[{ required: true, message: "姓名不能为空" }]}
            >
              <Input  placeholder="请输入姓名" />
            </Form.Item>
            <Form.Item
              name="code"
              label="身份证"
              rules={[{ required: true, message: "身份证不能为空" }]}
            >
              <Input placeholder="请输入身份证" />
            </Form.Item>
          </Form>
        }
        closeOnAction
        onClose={() => {
          setVisible(false);
        }}
        showCloseButton={true}
      />
    </div>
  );
}

export default Index;
